<template>
	<!-- #ifdef MP-WEIXIN -->
	<view class="footer" >
		<view class="footer-center">
			<!-- <input class="input-text" type="text"  @blur="blur" @confirm="sendMessge" v-model="inputValue"  :focus="focus"  :placeholder="placeholder"></input> -->
		<textarea class="input-text" @blur="blur" :cursor-spacing='100' :fixed="true"  @confirm="sendMessge" :show-confirm-bar="false" v-model="inputValue" :focus="focus" :maxlength="maxLen"  :placeholder="placeholder"></textarea>
		</view>
	<!-- #endif -->
	<!-- #ifdef H5 -->
	<view class="footer" v-clickoutside='blur'>
		<view class="footer-center">
			<!-- <input class="input-text" type="text"   @confirm="sendMessge" v-model="inputValue"  :focus="focus"  :placeholder="placeholder"></input> -->
			<textarea class="input-text"    @confirm="sendMessge"  v-model="inputValue" :focus="focus" :maxlength="maxLen"  :placeholder="placeholder"></textarea>
		</view>
	<!-- #endif -->
		<view class="footer-right">
			<view id='msg-type' class="send-comment"  @tap="sendMessge">发送</view>
		</view>
	</view>
</template>

<script>
	const clickoutside = {
	    // 初始化指令
	    bind(el, binding, vnode) {
			
	        function documentHandler(e) {	    
	
	            // 这里判断点击的元素是否是本身，是本身，则返回
	            if (el.contains(e.target)) {
					
	                return false;
	            }
	            // 判断指令中是否绑定了函数
	            if (binding.expression) {
	                // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
	                binding.value(e);
	            }
	        }
	        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
	        el.__vueClickOutside__ = documentHandler;
	        document.addEventListener('click', documentHandler);
			
	    },
	    update() {},
	    unbind(el, binding) {
	        // 解除事件监听
	        document.removeEventListener('click', el.__vueClickOutside__);
	        delete el.__vueClickOutside__;
	    },
	};
	export default {
		name: "chat-input",
		data() {
			return {
				inputValue: '',
				isShow:false
			}
		},
		props:{
			placeholder: {
				type: String,
				required: true
			},
			focus: {
				type:Boolean,
				required: true
			},
			show:{
				type:Boolean,
				required:true
			},
			maxLen: {
				type: Number,
				default: 50
			}
		},
		watch:{
			show:function(newVal,oldVal){
			
				this.isShow=newVal
			}			
		},
		
		directives: {clickoutside},
	
		
		methods: {
			blur: function() {//失焦触发通知父组件	
		
			// #ifdef  MP-WEIXIN
			this.isShow=!this.isShow;
			// #endif	
				
				if(!this.isShow){
				this.$emit('blur')
				}
				else{
					 this.isShow=!this.isShow;
				}
			},		
				
			sendMessge: function (e) {
				
				if (!this.inputValue) {
					uni.showModal({
						content:"还没有输入内容哦!",
						showCancel:false
					})
					return;
				}
				var that = this;
				//点击发送按钮时，通知父组件用户输入的内容
				this.$emit('send-message', {
					type: 'text',
					content: that.inputValue
				});
				that.inputValue = '';//清空上次输入的内容
			}
			
		}
	}
</script>

<style lang="scss">
	.footer {
		display: flex;
		width: 100%;		
		min-height: 200rpx;
		border-top: solid 1px #bbb;
		overflow: hidden;
		padding: 5upx;
		background-color: #F4F5F6;
		overflow-y: hidden;
	}
	.footer-left {

		width: 80upx;
		height: 200rpx;

		display: flex;
		justify-content: center;
		align-items: center;
	}
	.footer-right {
		width: 20%;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		color: #1482D1;
		flex-grow: 0;
		flex-shrink: 0;
	}
	.footer-center {
		padding-left: 20upx;
		width: 80%;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-grow: 0;
		flex-shrink: 0;
	}
	.footer-center .input-text {
		background: #fff;
		/* border: solid 1upx #ddd; */
		padding: 10upx !important;
		font-family: verdana !important;
		overflow: hidden;
		border-radius: 15upx;
		height: 80%;
		width: 100%;
	}
	.footer-right .send-comment{
		background-color: $uni-color-main-dark;
		text-align: center;
	     display: flex;
		 justify-content: center;
		 align-items: center;
		color: #FFFFFF;
		width: 60%;
		
		height: 60upx;
		border-radius: 5px;
		font-size: 25rpx;
		position: absolute;
		bottom: 5rpx;
		
	}
</style>
